<template>
  <div class="screen" :class="{ hidden: hidden }">
    <div class="modal">
      <div class="head">
        裁剪
        <div class="close" @click="close">X</div>
      </div>
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      hidden: true,
    };
  },
  methods: {
    open() {
      this.hidden = false;
    },
    close() {
      this.hidden = true;
    },
  },
};
</script>
<style>
.screen {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(100, 100, 100, 0.6);
  opacity: 1;
  transition: all 0.5s;
}
.hidden {
  opacity: 0;
  pointer-events: none;
}
.modal {
  position: absolute;
  left: 50%;
  top: 50%;
  background-color: #fff;
  border-radius: 12px;
  min-width: 100px;
  min-height: 100px;
  /* max-width: calc(100% - 50px);
  max-height: calc(100% - 50px); */
  transform: translateX(-50%) translateY(-50%);
  /* overflow: auto; */
  padding: 16px;
}
.head {
  font-size: 22px;
  text-align: center;
}
.close {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 24px;
}
</style>
